<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="授权" width="700px" @ok="handleSubmit">
    <BasicForm @register="registerForm"/>

    <BasicTree
      ref="treeRef"
      checkable
      toolbar
      :treeData="state.treeData"
      :checkedKeys="state.checkedKeys"
      :expandedKeys="state.allTreeKeys"
      :selectedKeys="state.selectedKeys"
      :checkStrictly="true"
      :clickRowToExpand="false"
      title="资源"
      highlight
      search
      @check="onCheck"
      @select="onTreeNodeSelect">
      <template #title={slotTitle,ruleFlag}>
        {{ slotTitle }}
        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left:5px;color: red;"></Icon>
      </template>
    </BasicTree>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import {BasicForm, useForm} from '/@/components/Form/index';
import { authorizeFromSchema } from './resource.data';
import { BasicTree, TreeItem } from '/@/components/Tree';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { Icon } from '/@/components/Icon';

import { useMessage } from '/@/hooks/web/useMessage';
// 声明Emits
const emit = defineEmits(['success', 'register']);

//表单配置
const [registerForm, {setProps, resetFields, setFieldsValue, validate, updateSchema}] = useForm({
  labelWidth: 80,
  labelCol: {
    md: { span: 4 },
    sm: { span: 6 },
  },
  wrapperCol: {
    md: { span: 20 },
    sm: { span: 18 },
  },
  schemas: authorizeFromSchema,
  showActionButtonGroup: false,
});

interface State {
  // 树的信息
  treeData: TreeItem[];
  // 树的选择节点信息
  checkedKeys?: string[]
  // 树的全部节点信息
  allTreeKeys?: string[];
  defaultCheckedKeys?: string[];
  // 树的选中的节点信息
  selectedKeys: string[];
}

const state = reactive<State>({
  treeData: [],
  selectedKeys: []
})



/**
 * 数据
 */
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await reset();
  setDrawerProps({ confirmLoading: false });
});


/**
 * 点击选中
 */
const onCheck = (o) => {
  state.checkedKeys = o.checked ? o.checked : o
}
/**
 * 选中节点，打开数据权限抽屉
 */
const onTreeNodeSelect = (key) => {
  if(key && key.length>0){
    state.selectedKeys = key
  }
  unref(state.selectedKeys)[0]
}

/**
 * 重置
 */
function reset() {
  
}

/**
 * 提交
 */
async function handleSubmit() {
  console.log("editKey: ", transferRef.value.emitKeys);
  
  //关闭弹窗
  closeDrawer();
  //刷新列表
  emit('success');
}

</script>


<style scoped lang="less">

</style>